<template>
  <h1> 商品详情</h1>
  <button @click="onNav">返回</button>
  <button @click="onplay"> 支付界面 </button>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <div class="xq-head">
    <img @click="goBackAndRefresh" src="../assets/img3-ziliao/返回.png" alt="图片加载失败">
    <h2>详情</h2>
  </div>
  <div class="xq-body">
    <div class="xq-body-item1"></div>
    <div class="xq-item1">
      <img class="xq-i1" src="../assets/img5-xiangqing/绿色收藏.png" alt="图片加载失败">
      <h3>一盆多肉植物</h3>
      <div class="xq-t1">
        <img src="../assets/img2-shangcheng/星星.png" alt="图片加载失败"/>
        <p>5.0分</p>
      </div>
      <div class="xq-t2">
        <h4>商品介绍</h4>
        <div>
          用户主动点击分享 绝大多数APP都是在详情页等需要分享的页面放置一个分享按钮，由用户自行选择分享。这种情况下用户是否分享主要是取决于产品内容本身，比如内容有趣或是有用。在一些APP中设计者会对这个分享按钮加一些鼓励的文案或着重的设计来促进用户分享。
          所以监听用户的截图操作，提示用户进行分享，既缩短了以前分享截图的操作路径，避免了在之前长路径中的行为流失比如截图完成后忘记分享或觉得麻烦放弃分享等等...
        </div>
      </div>
      <div class="xq-t3">
        <div>查看更多</div>
        <img src="../assets/img5-xiangqing/下拉.png" alt="图片加载失败"/>
      </div>
      <div class="xq-t4">
        <div class="xq-t4-1">
          <img class="xq-i2" src="../assets/img5-xiangqing/减号.png" alt="图片加载失败">
          1
          <img src="../assets/img5-xiangqing/加号.png" alt="图片加载失败">
        </div>
        <button class="xq-btn" @click="onTz('/zhi_fu')" >结算订单</button>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "exiangQingPage",
  beforeCreate(){
    let goodsId = this.$route.params.ap
    console.log('请求商品id',goodsId)
  },
  methods: {
    goBackAndRefresh() {
      // 返回上一页
      this.$router.go(-1);
    },
    onTz(path){
      this.$router.push(path)
    }
  }
}
</script>

<style scoped>
a{
  text-decoration: none;
  color: white
}
.xq-head{
  border:1px solid #e8e8e8 ;
  background-color: #e8e8e8;
  position: -webkit-sticky;
  position: sticky;top: 0;
  display: flex;
  justify-content: start;
  align-items: center;
}
.xq-head img{margin-left:10px;}
.xq-head h2{margin-left: 50px}
.xq-item1{position: relative;}
.xq-body-item1{
  height: 500px;
  background-image: url("../assets/a.png");background-size:100%;background-repeat:no-repeat;}
.xq-body .xq-item1{
  width:100%;
  background-color: white;
  margin-top: -250px;
  border-radius: 26px 26px 0 0 ;}
.xq-body .xq-item1 .xq-i1{
  width:44px;
  height:44px;
  position: fixed;
  right: 0;
  top:330px;
}
.xq-body .xq-item1 h3{
  margin-left: -350px;
  padding-top: 20px
}
.xq-body .xq-item1 .xq-t1{
  margin-top:-50px;
  color:gray;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 20px
}
.xq-body .xq-item1 .xq-t1 p{
  color:gray;
  margin-top: 15px;
  margin-left: 5px
}
.xq-body .xq-item1 .xq-t2{
  line-height:24px;
  display: flex;
  flex-direction: column;
  align-items:start;
  padding-left: 20px
}
.xq-body .xq-item1 .xq-t2 div{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow:hidden;
  text-overflow:ellipsis;
}
.xq-body .xq-item1 img{
  width: 65px;
  height: 13px
}
.xq-body .xq-item1 .xq-t3{
  margin-top:10px;
  color: #81C71EFF;
  display: flex;
  align-items:center;
  flex-direction: row;
  padding-left: 25px
}
.xq-body .xq-item1 .xq-t3 img{
  width: 10px;
  height: 10px;
  margin-left: 10px;
  margin-top: 5px;
}
.xq-body .xq-item1 .xq-t4{
  position:absolute;
  bottom:-100px;
  width:100%;
  display: flex;
  flex-direction: row;
}
.xq-body .xq-item1 .xq-t4-1{
  display: flex;
  align-items:center;
  justify-content:space-around;
  width:186px;height:56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 -3px 6px  rgba(173, 174, 179, 0.09), 0px 3px 6px  rgba(173, 174, 179, 0.09);
}
.xq-body .xq-item1 .xq-t4-1 img{
  width: 15px;
  height: 15px;
}
.xq-body .xq-item1 .xq-btn{
  color:white;
  font-size:19px;
  letter-spacing:0;
  text-align:center;
  border-radius: 10px;
  line-height:56px;
  width:186px;
  height:56px;
  background-color: #81C71EFF;
  flex: 1
}
.xq-body .xq-item1 .xq-t4 button
{border: none}
</style>
